<template>
  <view class="">
    <view class="login-box">
      <uni-forms class="formContainer" :modelValue="formData" ref="individual">
        <uni-forms-item ref="code" name="code">
          <view class="form-item">
            <view class="label-box">
              <view class="label-left">
                <text class="label-title" style="margin-left: 10rpx">统一社会信用代码</text>
                <text style="color: #fa0000; margin-left: 10rpx">*</text>
              </view>
            </view>
            <view class="item-input">
              <uni-easyinput :inputBorder="false" type="text" placeholder="请输入统一社会信用代码"
                v-model="formData.code"></uni-easyinput>
            </view>
          </view>
        </uni-forms-item>

        <uni-forms-item ref="age" name="age">
          <view class="form-item">
            <view class="label-box">
              <view class="label-left">
                <text class="label-title" style="margin-left: 10rpx">申请人年龄</text>
                <text style="color: #fa0000; margin-left: 10rpx">*</text>
              </view>
            </view>
            <view class="item-input">
              <uni-easyinput :inputBorder="false" type="number" placeholder="请输入申请人年龄" maxlength="8"
                v-model="formData.age"></uni-easyinput>
            </view>
          </view>
        </uni-forms-item>
        <view class="btnBox">
          <button class="btnSubmit" :loading="loading" :disabled="loading" type="primary" @click="onSubmit()">
            立即查询
          </button>
          <!-- #ifdef MP-WEIXIN -->
          <button class="share" open-type="share" type="primary">
          	分享
          </button>
          <!-- #endif -->
          <!-- #ifdef H5 -->
          <button class="share" @click="openAnthoer" type="primary">
          	分享
          </button>
          <!-- #endif -->
        </view>
      </uni-forms>
    </view>
  </view>
</template>

<script>
import { searchDicListApi } from "@/api/public";
import { mapGetters } from "vuex";
export default {
  props: {
    current: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      visible: false,
      roleOptions: [],
      formData: {
        code: "",
        age: "",
      },

      formRules: {
        code: {
          rules: [
            {
              required: true,
              errorMessage: "请输入统一社会信用代码",
            },
          ],
        },
        age: {
          rules: [
            {
              required: true,
              errorMessage: "请输入年龄",
            },
            {
              validateFunction: function (rule, value, data, callback) {
                if (value < 18 || value > 100) {
                  callback('申请人年龄只支持18~100岁')
                }
              }
            },
          ],
        },
      },
    };
  },
  onReady() { },
  mounted() {
    this.$refs.individual.setRules(this.formRules);
  },
  computed: mapGetters(["isLogin"]),
  created() { },
  methods: {
	openAnthoer() {
		this.$emit('openShareLog')
	},
    onClose() {
      this.visible = false

    },
    onSubmit() {
      if (!this.isLogin) return uni.navigateTo({
        url: "/pagesWater/users/login",
      });
      this.$refs.individual.validate().then(async (validate) => {
        let reg = /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/
        if (!reg.test(this.formData.code)) return this.$util.Tips('请输入正确的统一社会信用代码')
        // this.loading = true;
        let params = {
          age: this.formData.age.trim(),
          code: this.formData.code,
        };
        console.log("params", params);
        uni.navigateTo({
          url: `/pagesProduct/shoperMatch/index?code=${params.code}&age=${params.age}`,
        });
      });
    },
    openPicker() {
      this.$refs.role.open();
    },
    rolePickerConfirm({ index, value, options }) {
      this.formData.role = value[0].dictLabel;
    },
    async getPickerOptions() {
      let arr = ["person_stand"];
      let res = await searchDicListApi(arr.join(","));
      if (res && res.code == 200) {
        this.roleOptions = [res.data.person_stand];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .is-input-border {
  border: none !important;
}

/deep/ .uni-easyinput__placeholder-class {
  font-weight: 400;
  font-size: 34rpx;
  color: #999999;
}

/deep/ .uni-easyinput__content-input {
  padding-left: 0 !important;
}

/deep/ .uni-input-input {
  font-size: 34rpx;
}

.optionsBox {
  position: absolute;
  z-index: 10;
  top: 140rpx;
  left: 0rpx;
  padding: 30rpx 20rpx;
  width: 100%;
  border-radius: 10rpx;
  background-color: #ffffff;
  border: 1px solid #ebeef5;
  overflow-y: scroll;

  .option {
    line-height: 40rpx;
    margin-bottom: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:last-child {
      margin-bottom: 0rpx;
    }

    .delete {
      width: 30rpx;
      height: 30rpx;
    }
  }
}

.form-box {
  margin-top: 40rpx;
}

.login-box {
  .form-item {
    .label-box {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .label-left {
        display: flex;
        align-items: center;

        .label-title {
          font-weight: 600;
          font-size: 30rpx;
          color: #333333;
        }
      }

      .label-right {
        .get-code {
          width: 180rpx;
          height: 70rpx;
          line-height: 70rpx;
          text-align: center;
          background: #2872fd;
          border-radius: 6rpx;
          font-weight: 600;
          font-size: 30rpx;
          color: #ffffff;
        }

        .btnDisabledStyle {
          width: 180rpx;
          height: 70rpx;
          line-height: 70rpx;
          font-size: 30rpx;
          background: #cccccc;
          cursor: not-allowed;
          border: none;
          color: white;
          text-align: center;
          border-radius: 6rpx;
        }
      }
    }

    .item-input {
      border-bottom: 1rpx solid #e6e6e6;
      padding-bottom: 20rpx;
    }
  }

  .login-btn {
    margin-top: 80rpx;
  }

  .first-title {
    margin-top: 20rpx;
    font-weight: 400;
    font-size: 30rpx;
    color: #999999;
  }
}

.btnBox {
  // display: flex;
  margin-bottom: 30rpx;

  .btnSubmit {
    color: #ffffff;
    font-weight: 500;
    height: 88rpx;
    background: #276ff7;
    border-radius: 12rpx;
    font-weight: 600;
    font-size: 34rpx;
    color: #ffffff;
    line-height: 88rpx;
  }

  .share {
    height: 88rpx;
    background: #fff;
    margin-top: 30rpx;
    font-weight: 600;
    font-size: 34rpx;
    color: #2872FD;
    line-height: 86rpx;
    border-radius: 12rpx;
    border: 3rpx solid #2872FD;
  }
}


.picker-text {
  display: flex;
  justify-content: space-between;
  font-weight: 400;
  font-size: 34rpx;
  color: #999999;
  padding-bottom: 10rpx;
}

/deep/.is-input-error-border .uni-easyinput__placeholder-class {
  color: #999 !important;
}

.btnSubmit {
  font-weight: 600;
  font-size: 34rpx;
  color: #ffffff;
}
</style>
